<div class="container">
	<div class="row">
		<div class="col-md-12">
			<div class="titlepage">
				<h2>个人信息</h2>
			</div>
		</div>
	</div>
</div>
<div class="brand-bg">
	<div class="container">
		<div class="row">
			<div class="bg-user-shop col-md-12">
				<form class="main_form">
					<div class="row">
						<div class="user-shop-img col-md-12">
							<div class="user-img">
								<img src="icon/Product-Sale-Flyer-Template-V-3-990x518.jpg" />
							</div>
							<div>
								<button type="button" class="user-address btn btn-default" href="javascript:void(0);">修改头像</button>
								<input type="file" class="hidden-val" id="user-img-msg"/>
								<button type="button" id="useraddress" class="btn btn-default" href="javascript:void(0);" data-toggle="modal" data-target="#address-list">地址信息</button>
							</div>
						</div>
						<div id="tips">

						</div>
						<div class="user-shop-message col-md-12">
							<div class="user-shop-name">旧密码</div>
							<input type="password" id="apassword" name="username" placeholder="旧密码"/>
						</div>
						<div class="user-shop-message col-md-12">
							<div class="user-shop-name">新密码</div>
							<input type="password" id="bpassword" name="username" placeholder="新密码"/>
						</div>
						<div class="user-shop-message col-md-12">
							<div class="user-shop-name">手机</div>
							<input type="tel" maxlength="11" id="phone" name="username" placeholder="手机"/>
						</div>
						<div class="user-shop-message col-md-12">
							<div class="user-shop-name">电子邮箱</div>
							<input type="email" id="email" name="username" placeholder="电子邮箱"/>
						</div>

						<div class="user-shop-button col-md-12">
							<div class="button-middle">
								<button id="saveusermsg" class="btn btn-success" type="button">修改信息</button>
							</div>
							<div class="button-middle">
								<button id="logout" class="btn btn-danger" type="button">退出登录</button>
							</div>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>
<script>
	$(function (){
		let user = $("#mainContentId").data("user");
		$(".user-img").empty();
		$(".user-img").append(`<img src="${user.userImgUrl}"/>`);
		$("#phone").val(user.phone);
		$("#email").val(user.email);
		$(".user-address").click(function (){
			$("#user-img-msg").click();
		});
		$("#useraddress").click(function (){
			$(".modal-footer").css("display","none");
		});
		$("#saveusermsg").click(function (){
			let userImgUrl = $("#mainContentId").data("userImgUrl");
			let phone = $("#phone").val();
			let email = $("#email").val();
			let password = $("#apassword").val();
			let newpassword = $("#bpassword").val();
			let params;
			if (newpassword.length<=0||password.length<=0){
				password=null;
				params = {"password":password,"phone":phone,"email":email,"userImgUrl":userImgUrl};
			}else{
				params = {"newpassword":newpassword,"password":password,"phone":phone,"email":email,"userImgUrl":userImgUrl};
			}
			let url = `/ruoyi/user/updateuser`;
			$.ajax({
				url:url,
				data:params,
				type:"post",
				dataType:"json",
				success(result){
					if (result.status===200){
						alert("修改成功!");
						location=location;
					}
				},
				error(){
					alert("修改失败");
				}
			});
		});
		$("#logout").click(function (){
			let url = `/ruoyi/logout`;
			$.ajax({
				url:url,
				dataType: "json",
				success(result){
					if (result.status===200){
						alert("登出成功!");
						location=location;
					}
				},
				error(){
					alert("登出失败");
				}
			});
		});
	});

	$("#apassword").change(function (){
		doCheckPwd();
	});
	$("#bpassword").change(function (){
		doCheckPwd();
	});
	function doCheckPwd(){
		let password = $("#apassword").val();
		let newpassword = $("#bpassword").val();
		if (password.length<=0&&newpassword.length<=0){
			$("#tips").empty();
			return ;
		}
		if (password.length<8||password.length>16||newpassword.length<8||newpassword.length>16){
			$("#tips").empty();
			$("#tips").append(`<p class="alert alert-danger" role="alert">密码长度8~16位,需要填写旧密码和新密码</p>`);
			return ;
		}
		$("#tips").empty();
		$("#tips").append(`<p class="alert alert-success" role="alert">提交后会进行验证并修改原密码</p>`);
	}

	$("#user-img-msg").change(function (){
		let img = this.files;
		if(img.length==0){
			return ;
		}
		$(".user-img").empty();
		$(".user-img").append(domakeimg(img[0]));
	});
	function domakeimg(imgUrl){
		let reader = new FileReader();
		reader.readAsDataURL(imgUrl);
		reader.onload = function (){
			$("#mainContentId").data("userImgUrl",reader.result);
			$(".user-img").append(`<img src="${reader.result}"/>`);
		}
	}

</script>